<template>
	<view class="reply-item" :key="reply.id" :style="{marginLeft:reply.level==2?'45rpx':'0px'}">
		<view class="reply-content">
			<text class="reply-author">{{ reply.userName }}
				<template v-if="reply.level>1">
					<text style="color: black;"> 回复 </text>
					{{reply.parentUserName}}
				</template>
				：
			</text>
			<text>{{ reply.content }}</text>
		</view>
		<view class="reply-actions">
			<text class="reply-time">{{ reply.createTime }}</text>
			<view>
				<text class="reply-like" @click="handleReplyLike(reply)">
					<uni-icons type="heart" :color="reply.likeId != null ? '#ff4d4f' : '#666'" size="14"></uni-icons>
					<text :style="{color:reply.likeId != null ? '#ff4d4f' : '#666'}">{{reply.likeCnt}}</text>
				</text>
				<text style="margin-left: 18rpx;" @click="showReplyInput(reply)">
					<uni-icons type="chatbubble" size="16" color="#666"></uni-icons>
					<text>回复</text>
				</text>
			</view>

		</view>
		<view class="reply-input" v-if="reply.showReplyInput">

			<input type="text" v-model="replyContent" placeholder="输入回复内容..." class="reply-input-field">
			</input>
			<button class="reply-submit" @click="submitReply(reply)">发送</button>
		</view>

		<view v-if="reply.children && reply.children.length > 0" class="replies">
			<EvaluateTree v-for="item in reply.children" :reply="item" :dynamicBroadcastId="dynamicBroadcastId"
				@showReplyInput="showReplyInput" @reply="handleReply" @updateEvaluateNum="updateEvaluateNum"
				:curentLongitude="curentLongitude" :curentLatitude="curentLatitude"
				@handleCommentLike="handleReplyLike" />
		</view>
	</view>
</template>

<script>
	import {
		addEvaluate,
		listDynamicBroadcastEvaluate
	} from '@/common/api/dynamicBroadcastEvaluate.js'
	export default {
		name: 'EvaluateTree',
		props: ['dynamicBroadcastId', 'reply', 'curentLongitude', 'curentLatitude'],
		data() {
			return {
				replyContent: ''
			}
		},
		methods: {
			handleReplyLike(reply) {
				this.$emit("handleCommentLike", reply)
			},
			// 显示回复输入框
			showReplyInput(comment) {
				this.$emit("showReplyInput", comment)
			},
			updateEvaluateNum() {
				this.$emit("updateEvaluateNum")
			},
			// 提交回复
			submitReply(comment) {

				if (!this.replyContent.trim()) {
					uni.showToast({
						title: '回复内容不能为空',
						icon: 'none'
					});
					return;
				}
				let form = {
					content: this.replyContent,
					parentId: comment.id,
					ancestors: comment.ancestors + "," + comment.id,
					dynamicBroadcastId: this.dynamicBroadcastId,
					level: comment.level + 1,
					longitude: this.curentLongitude,
					latitude: this.curentLatitude,
					parentUserId: comment.userId,
					parentUserName: comment.userName
				}
				addEvaluate(form).then((res) => {
					if (res.code == 200) {
						uni.showToast({
							title: '已回复',
							icon: "none",
							duration: 2000
						});
						if (comment.children == null) {
							comment.children = []
						}
						comment.children.push(res.data)
						this.$emit('updateEvaluateNum')
						this.replyContent = '';
						comment.showReplyInput = false;

					}
				})
				// this.$emit('reply', comment, this.replyContent)

			}

		}
	}
</script>

<style scoped lang="scss">
	/* 回复列表 */
	.reply-list {
		margin-left: 46px;
		background-color: #f9f9f9;
		padding: 8px;
		border-radius: 4px;
		margin-bottom: 10px;
	}

	.reply-item {
		margin-bottom: 8px;
		font-size: 13px;
	}

	.reply-author {
		color: #007aff;
		font-weight: 500;
	}

	.reply-actions {
		display: flex;
		justify-content: space-between;
		margin-top: 4px;
		font-size: 11px;
		color: #999;
	}

	/* 回复输入框 */
	.reply-input {
		// position: absolute;
		display: flex;
		background-color: #fff;
		bottom: -22px;
		z-index: 999;
		width: 100%;
	}

	.reply-input-field {
		flex: 1;
		height: 36px;
		border: 1px solid #eee;
		border-radius: 18px;
		padding: 0 16px;
		font-size: 13px;
	}

	.reply-submit {
		width: 60px;
		height: 36px;
		line-height: 36px;
		text-align: center;
		background-color: #007aff;
		color: #fff;
		border-radius: 18px;
		font-size: 14px;
		margin-left: 8px;
	}
</style>